<!--
 * @Author: Meow
 * @Date: 2019-11-20 10:13:16
 * @LastEditors: Meow
 * @LastEditTime: 2019-11-22 09:54:56
 * @Description: 添加流程节点弹出层[查看节点详情]
 -->
<template>
  <div id="Tabs">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基本信息" name="first">
        <!-- tabs1:基本信息↓ -->
        <el-form :model="formData.skyBusiProceNodes[0]" label-width="100px">
          <el-form-item label="节点名称：">
            <el-input :disabled="NodeDisabled" v-model="formData.skyBusiProceNodes[0].nodeName"></el-input>
          </el-form-item>
          <el-form-item label="业务密级：">
            <el-select :disabled="NodeDisabled" v-model="formData.skyBusiProceNodes[0].secretLevel" placeholder="请选择">
              <el-option v-for="item in Options1" :key="item.dictName" :label="item.dictName" :value="item.dictName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="节点类型：">
            <el-select :disabled="NodeDisabled" v-model="formData.skyBusiProceNodes[0].nodeType" placeholder="请选择">
              <el-option v-for="item in Options2" :key="item.name" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务边界：">
            <el-input :disabled="NodeDisabled" v-model="formData.skyBusiProceNodes[0].businessBoundary"></el-input>
          </el-form-item>
          <el-form-item label="标签：">
            <!-- <treeselect :disabled="NodeDisabled" :multiple="true" :options="queryLabelTree" :flat="true" :default-expand-level="1" :normalizer="_normalizer" placeholder="选择标签"
              noOptionsText="暂无数据" noResultsText="没有找到匹配结果" noChildrenText="没有子节点" v-model="formData.skyBusiProceNodes[0].label" /> -->
            <el-input  :disabled="NodeDisabled"   v-model="formData.skyBusiProceNodes[0].labelName"></el-input>
          </el-form-item>
        </el-form>
        <!-- tabs1:基本信息↑ -->
      </el-tab-pane>
      <!-- tabs2:执行单位 ↓-->
      <el-tab-pane label="执行单位" name="second">
        <div class="add-box" v-if="!NodeDisabled">
          <el-button size="mini" type="primary" @click="add1">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiExecDepartments" :header-cell-style="tableStyle">
          <el-table-column prop="unitName" label="单位名称" align="center"></el-table-column>
          <el-table-column prop="execOffice" label="执行处室" align="center"></el-table-column>
          <el-table-column label="操作" v-if="!NodeDisabled" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up1(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del1(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs2:执行单位 ↑-->
      <!-- tabs3:信息化系统 ↓-->
      <el-tab-pane label="信息化系统" name="third">
        <div class="add-box" v-if="!NodeDisabled">
          <el-button size="mini" type="primary" @click="add1">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiInforSystems" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="systemName" label="系统名称" align="center"></el-table-column>
          <el-table-column prop="execRole" label="执行角色" align="center"></el-table-column>
          <el-table-column label="操作" v-if="!NodeDisabled" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up2(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del2(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs3:信息化系统 ↑-->
      <!-- tabs4:上游节点 ↓-->
      <el-tab-pane label="上游节点" name="fourth">
        <div class="add-box" v-if="!NodeDisabled">
          <el-button size="mini" type="primary" @click="add1">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiUpstreamNodes" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="busiProceName" label="上游节点所属流程" align="center"></el-table-column>
          <el-table-column prop="parentNodeName" label="上游节点" align="center"></el-table-column>
          <el-table-column prop="accessParam" label="接入参数" align="center"></el-table-column>
          <el-table-column label="操作" v-if="!NodeDisabled" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up3(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del3(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs4:上游节点 ↑-->
      <!-- tabs5:输出参数 ↓-->
      <el-tab-pane label="输出参数" name="fifth">
        <div class="add-box" v-if="!NodeDisabled">
          <el-button size="mini" type="primary" @click="add1">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiOutputParams" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="paramTypeName" label="输出结果类型" align="center"></el-table-column>
          <el-table-column prop="systemName" label="所属系统" align="center"></el-table-column>
          <el-table-column prop="paramName" label="参数名称" align="center"></el-table-column>
          <el-table-column label="操作" v-if="!NodeDisabled" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up4(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del4(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs5:输出参数 ↑-->
      <!-- tabs6:业务规则 ↓-->
      <el-tab-pane label="业务规则" name="sixth">
        <div class="add-box" v-if="!NodeDisabled">
          <el-button size="mini" type="primary" @click="add1">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiRules" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="ruleType" label="规则类型" align="center"></el-table-column>
          <el-table-column prop="ruleSummary" label="规则概述" align="center"></el-table-column>
          <el-table-column prop="manageRule" label="治理规则" align="center"></el-table-column>
          <el-table-column label="操作" v-if="!NodeDisabled" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up5(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del5(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs6:业务规则 ↑-->
    </el-tabs>
  </div>
</template>
<script>
// 引入树选择器组件
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import processManagementApi from "@/httpUtils/ExternalManagement/processManagement";
export default {
  name: "SearchNodeDetail",
  components: {
    Treeselect
  },
  props: {
    // 基本信息
    currentNodeId: {
      type: String,
      default: () => ""
    },
    // 基本信息
    baseInfoData: {
      type: Object,
      default: () => {}
    },
    // 是否禁止点击
    NodeDisabled: {
      type: Boolean,
      default: () => false
    },
    // 操作类型 0：新增节点 1：修改节点 2：查看节点
    myNodeType: {
      type: Number,
      default: () => 0
    },
    // 标签树
    queryLabelTree: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 流程节点表单是否加载中
      loading: false,
      // 表格头部样式
      tableStyle: {
        color: "#606266",
        background: "#eef1f6"
      },
      // 流程节点表单
      formData: {
        // 基本信息
        skyBusiProceNodes: [
          {
            nodeName: "", // 节点名称
            nodeType: "", //  节点类型
            businessBoundary: "", // 业务边界
            label: [], // 标签
            secretLevel: "", // 业务密级
            busiProceId: "", // 流程ID
            versionId: "" // 版本ID
          }
        ],
        // 执行单位
        skyBusiExecDepartments: [],
        // 信息化系统
        skyBusiInforSystems: [],
        // 上游节点
        skyBusiUpstreamNodes: [],
        // 输出参数
        skyBusiOutputParams: [],
        // 业务规则
        skyBusiRules: []
      },
      // 当前弹出层
      activeName: "first",
      // 业务密级下拉列表
      Options1: [],
      // 节点类型
      Options2: [
        { name: "实体节点" },
        { name: "判断节点" },
        { name: "线下节点" }
      ]
    };
  },

  created() {
    let nodeId = this.currentNodeId;
    // let nodeId = 1000000246509144;
    this.GetAllNodeInfo(nodeId); // 获取节点有信息
  },
  watch: {
    currentNodeId: function(val, oldval) {
      this.GetAllNodeInfo(val); // 获取节点有信息
      this.activeName = "first";
    }
  },
  methods: {
    // 标签配置
    _normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.child
      };
    },
    // 获取节点有信息
    GetAllNodeInfo(nodeId) {
      this.GetInfoData(nodeId); // 获取节点基本信息
      this.GetskyBusiExecDepartments(nodeId); // 获取执行单位数据
      this.GetBusinessInfoSystem(nodeId); // 获取信息化系统
      this.BusinessUpstreamNode(nodeId); // 获取上游节点
      this.BusinessOutputParam(nodeId); // 获取输出参数
      this.BusinessRule(nodeId); // 获取业务规则
    },
    // select1 ： 获取节点[基本信息]
    GetInfoData(nodeId) {
      processManagementApi.findNodeDetail({ nodeId: nodeId }).then(res => {
        console.log("基本信息", res.data.data);
        if (res.data.data[0].label != "" && res.data.data[0].label != null) {
          res.data.data[0].label = res.data.data[0].label.split(",");
        } else {
          res.data.data[0].label = "";
        }
        this.formData.skyBusiProceNodes = res.data.data;
        console.log(this.formData);
        this.loading = false;
      });
    },
    // select2 ： 获取节点[执行单位]数据
    GetskyBusiExecDepartments(nodeId) {
      processManagementApi.findExecDepartment({ nodeId: nodeId }).then(res => {
        console.log("获取执行单位数据", res.data.data);
        this.formData.skyBusiExecDepartments = res.data.data;
      });
    },
    // select3 ： 获取节点[信息化系统]数据
    GetBusinessInfoSystem(nodeId) {
      processManagementApi.findInfoSystem({ nodeId: nodeId }).then(res => {
        console.log("获取信息化系统", res.data.data);
        this.formData.skyBusiInforSystems = res.data.data;
      });
    },
    // select4 ： 获取节点[上游节点]数据
    BusinessUpstreamNode(nodeId) {
      processManagementApi.findUpstreamNode({ busiNodeId: nodeId }).then(res => {
        console.log("获取上游节点", res.data.data);
        this.formData.skyBusiUpstreamNodes = res.data.data;
      });
    },
    // select5 ： 获取节点[输出参数]数据
    BusinessOutputParam(nodeId) {
      processManagementApi.findOutputParam({ busiNodeId: nodeId }).then(res => {
        console.log("获取输出参数", res.data.data);
        this.formData.skyBusiOutputParams = res.data.data;
      });
    },
    // select6 ： 获取[业务规则]数据
    BusinessRule(nodeId) {
      processManagementApi.findRule({ nodeId: nodeId }).then(res => {
        console.log("获取业务规则", res.data.data);
        this.formData.skyBusiRules = res.data.data;
      });
    },
    // --点击[返回]
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
@import url("../ProcessManagement.less");
</style>